import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Select, Table } from 'antd'
import _ from 'lodash';
import numeral from 'numeral'
const FormItem = Form.Item;
const { Option } = Select;
@connect()
@Form.create()
class IncidentalDetail extends Component {
  state = {
    incidental: {},
    dimensions: []
  }

  componentDidMount() {
    const { dispatch, item } = this.props;
    if (!_.isEmpty(item)) {
      this.queryDetailsInfo(item)
    }
    dispatch({
      type: 'price/fetchDimensions',
    }).then(res => {
      if (res.errorCode === 0) {
        this.setState({
          dimensions: res.data,
        });
      }
    });
  }
  componentWillReceiveProps({ item }) {
    const { dispatch } = this.props
    if (!_.isEmpty(item)) {
      this.queryDetailsInfo(item)
    }
  }
  queryDetailsInfo = (item) => {
    const { dispatch } = this.props
    dispatch({
      type: 'price/fetchIncidentalSheets',
      payload: {
        pathParams: {
          incidentalId: item.id,
        },
      },
    }).then(({ errorCode, data }) => {
      if (errorCode === 0) {
        this.setState({ incidental: data })
      }
    });
  }
  render() {
    const { form, item, noLevel = false } = this.props
    const { dimensions, incidental } = this.state
    let columns = [
      {
        title: `范围设定(${item.dimensionsUnitName})`,
        render: (text, record) => {
          return `${record.startPoint} - ${record.endPoint}`
        }
      },
      {
        title: '价格设定(CNY)',
        dataIndex: 'unitPrice',
        render: (text) => {
          return numeral(text).format('0,000.00')
        }
      },
      {
        title: '计价方式',
        dataIndex: 'calcTypeName',
      },
      {
        title: `计价步长(${item.dimensionsUnitName})`,
        dataIndex: 'baseValue',
        render: (text, record) => {
          if (record.calcType === 'PCT_SUM' || record.calcType === 'PCT_PERCENT') {
            return '-'
          } else {
            return text
          }
        }
      },
      {
        title: '收费限制',
        render: (text, record) => {
          return `${record.minPrice ? numeral(record.minPrice).format('0,000.00') : '-'} / ${record.maxPrice ? numeral(record.maxPrice).format('0,000.00') : '-'}`
        }
      },
    ]
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <div>
        <FormItem label="增值服务" {...formItemLayout}>
          {item.incidentalCodeName}
        </FormItem>
        <FormItem label="编&emsp;&emsp;码" {...formItemLayout}>
          {item.code}
        </FormItem>
        <FormItem label="生效时间" {...formItemLayout}>
          {item.startEffectTime}
        </FormItem>
        <FormItem label="失效时间" {...formItemLayout}>
          {item.endEffectTime}
        </FormItem>
        <FormItem label="货物类型" {...formItemLayout}>
          {item.cargoTypeNameList ? item.cargoTypeNameList.join('、') : ''}
        </FormItem>
        {!noLevel && <FormItem label="价格等级" {...formItemLayout}>
          {item.gradeName}
        </FormItem>}
        <FormItem label="币&emsp;&emsp;种" {...formItemLayout}>
          {item.currencyName}
        </FormItem>
        <FormItem label="状&emsp;&emsp;态" {...formItemLayout}>
          {item.approveName}
        </FormItem>
        <FormItem label="计价标准" {...formItemLayout}>
          {form.getFieldDecorator('dimensionsCode', {
            rules: [{ required: true, message: '计价标准不能为空' }],
            initialValue: incidental.dimensionsCode,
          })(
            <Select
              allowClear
              style={{ width: '100%' }}
              disabled
            >
              {dimensions.map(item => (
                <Option key={item.dimensionsCode} value={item.dimensionsCode}>
                  {item.dimensionsCodeName}
                </Option>
              ))}
            </Select>
          )}
        </FormItem>
        <Table columns={columns} dataSource={incidental.incidentalItemDtos} pagination={false}>
        </Table>
      </div>
    )
  }

}

export default IncidentalDetail
